<template>
  <div class="comment-item">
    <div class="head">
      <van-image
        round
        width="40"
        height="40"
        :src="comment.user.decorate_avatar"
        fit="cover"
        lazy-load
        @click="$router.push(`users/${comment.user.id}`)"
      />
    </div>
    <div class="content">
      <van-row
        align="center"
        type="flex"
        justify="space-between"
        style="paddign: 0 10px"
      >
        <van-col @click="$router.push(`/users/${comment.user.id}`)"
          ><h3>{{ comment.user.username }}</h3></van-col
        >
        <van-col>
          <van-rate
            v-model="comment.rating"
            :size="20"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            readonly
        /></van-col>
      </van-row>
      <p>{{ comment.content }}</p>
      <span class="time">{{ comment.create_time | dateFormat }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["comment"],
};
</script>

<style lang="less">
.comment-item {
  display: flex;
  margin-bottom: 5px;
}
.comment-item .head {
  width: 30px;
  height: 30px;
  padding: 10px;
}
.comment-item .content {
  width: 100%;
  padding: 5px;
  padding-right: 15px;
}
.comment-item .content .time {
  font-size: 12px;
  color: #666;
  display: block;
  float: right;
}

.comment-item h3 {
  line-height: 40px;
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  padding: 5px 0;
}

.comment-item p {
  margin: 0;
  font-size: 14px;
  color: #666;
  text-indent: 24px;
  line-height: 20px;
}
</style>
